<template>
	<view class="participate-page">
		<!-- 1. 自定义导航栏 -->
		<view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
			<u-icon name="arrow-left" color="#333" size="22" @click="goBack"></u-icon>
			<text class="nav-title">参与话题</text>
			<view class="nav-publish-button-wrapper">
				<u-button text="发布" shape="circle" size="mini" color="#FCB722" customStyle="color: #fff; letter-spacing: 4rpx; font-weight: bold;" @click="publish"></u-button>
			</view>
		</view>

		<!-- 2. 主内容区域 -->
		<view class="main-content" :style="{ paddingTop: navBarHeight + 'px' }">
			<!-- 【已修改】内容包裹层，用于统一左右边距 -->
			<view class="content-body">
				<!-- 话题信息卡片 -->
				<view class="topic-context-card">
					<view class="card-header">
						<text class="indexIconFont question-tag icon-canyuhuati-wen"></text>
						<text class="topic-title">{{ topic.title }}</text>
					</view>
					<view class="expand-topic" @click="toggleTopicExpansion">
						<text>{{ isTopicExpanded ? '收起话题' : '展开话题' }}</text>
						<u-icon :name="isTopicExpanded ? 'arrow-up' : 'arrow-down'" size="14" color="#999"></u-icon>
					</view>
					<view v-if="isTopicExpanded" class="topic-description">
						{{ topic.description }}
					</view>
				</view>

				<!-- 输入区域 -->
				<view class="input-area">
					<view class="title-input-wrapper">
						<text class="indexIconFont answer-tag icon-canyuhuati-huida"></text>
						<input class="title-input" v-model="postTitle" placeholder="添加标题，吸引更多人来互动吧~" placeholder-style="color:#ccc" maxlength="30" />
						<text class="char-counter">{{ postTitle.length }}/30</text>
					</view>
					<textarea
						class="content-textarea"
						v-model="postContent"
						placeholder="输入图文内容，试着详细说说~"
						placeholder-style="color:#ccc"
						auto-height
						:maxlength="-1"
						:adjust-position="false"
					/>
				</view>
			</view>
		</view>

		<!-- 3. 底部工具栏 -->
		<view class="bottom-toolbar">
			<!-- 【已修改】定位行移至上方 -->
			<view class="toolbar-switch-row">
				<text class="toolbar-label">开启定位</text>
				<u-switch v-model="isLocationEnabled" activeColor="#FFD43D" size="20"></u-switch>
			</view>
			<view class="toolbar-icon-row">
				<view class="toolbar-icon-row-left">
					<text class="indexIconFont icon-canyuhuati-zitidaxiao"></text>
					<!-- <text class="indexIconFont icon-canyuhuati-tupian"></text>
					<text class="indexIconFont icon-canyuhuati-shipin"></text> -->
					<view class="icon">
						<u-icon name="photo" size="27" color="#333"></u-icon>
					</view>
					<view class="icon">
						<u-icon name="play-circle" size="24" color="#333"></u-icon>
					</view>
					<text class="indexIconFont icon-canyuhuati-biaoqing"></text>
				</view>
				<view class="toolbar-icon-row-right">
					<!-- <text class="indexIconFont icon-canyuhuati-niming"></text> -->
					<u-icon class="icon-nm" name="account-fill" size="24" color="#333"></u-icon>
					<text>匿名</text>
				</view>
				<!-- <u-icon name="attach" size="24" color="#333"></u-icon>
				
				<u-icon name="kefu-ermai" size="24" color="#333"></u-icon>
				<u-icon name="account" size="24" color="#333"></u-icon>
				<u-icon name="coupon" size="24" color="#333"></u-icon> -->
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			statusBarHeight: 0,
			navBarHeight: 0,
			topic: {}, // 从上一个页面接收
			isTopicExpanded: false,
			postTitle: '',
			postContent: '',
			isLocationEnabled: true,
		};
	},
	onLoad() {
		const systemInfo = uni.getSystemInfoSync();
		this.statusBarHeight = systemInfo.statusBarHeight;
		this.navBarHeight = systemInfo.statusBarHeight + 44;

		const eventChannel = this.getOpenerEventChannel();
		if (eventChannel && eventChannel.on) {
			eventChannel.on('acceptDataFromTopicDetail', ({ topic }) => {
				this.topic = topic;
			});
		}
	},
	methods: {
		goBack() {
			uni.navigateBack();
		},
		publish() {
			// 在这里处理发布逻辑
			uni.showToast({ title: '发布功能待实现', icon: 'none' });
		},
		toggleTopicExpansion() {
			this.isTopicExpanded = !this.isTopicExpanded;
		}
	}
};
</script>

<style lang="scss" scoped>
.participate-page {
	background-color: #fff;
	height: 100vh;
	display: flex;
	flex-direction: column;
}

.custom-navbar {
	position: fixed; top: 0; left: 0; right: 0; z-index: 999;
	display: flex; align-items: center; justify-content: space-between;
	height: 44px; padding: 0 30rpx;
	background-color: #fff;
	box-shadow: 0 8rpx 10rpx rgba(0, 0, 0, 0.06);
	.nav-title { font-size: 32rpx; font-weight: bold; }
	.nav-publish-button-wrapper {
		width: 90rpx;
	}
}

.main-content {
	flex: 1;
	background-color: #fff;
}

/* 【新增】内容主体包裹，用于设置左右内边距 */
.content-body {
	padding: 0 30rpx;
}

/* 【已修改】话题卡片样式 */
.topic-context-card {
	padding: 24rpx 0;
	background-color: transparent; // 无背景色
	border-bottom: 1rpx solid #f0f0f0; // 用底部边框分割
	.card-header {
		display: flex;
		align-items: flex-start;
		.question-tag {
			color: #F66B2F;
			border-radius: 50%;
			width: 56rpx;
			height: 56rpx;
			line-height: 56rpx;
			text-align: center;
			font-size: 50rpx;
			margin-right: 16rpx;
			flex-shrink: 0;
		}
		.topic-title {
			font-size: 38rpx;
			font-weight: bold;
			line-height: 1.5;
		}
	}
	.expand-topic {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		font-size: 24rpx;
		color: #999;
		padding: 10rpx 0;
	}
	.topic-description {
		font-size: 26rpx;
		color: #666;
		line-height: 1.6;
		margin-top: 10rpx;
	}
}

.input-area {
	.title-input-wrapper {
		display: flex;
		align-items: center;
		padding: 10rpx 0;
		.answer-tag {
			color: #1296DB; // 蓝色
			border-radius: 50%;
			width: 56rpx;
			height: 56rpx;
			line-height: 56rpx;
			text-align: center;
			font-size: 50rpx;
			margin-right: 16rpx;
			flex-shrink: 0;
		}
		.title-input {
			flex: 1;
			font-size: 32rpx;
			font-weight: bold;
			height: 80rpx;
		}
		.char-counter { font-size: 24rpx; color: #c0c4cc; }
	}
	.content-textarea {
		width: 100%;
		font-size: 28rpx;
		line-height: 1.6;
		min-height: 200rpx;
		padding-top: 20rpx;
	}
}

/* 【已修改】底部工具栏样式 */
.bottom-toolbar {
	display: flex;
	flex-direction: column; /* 垂直布局 */
	padding: 20rpx 30rpx;
	background-color: #fff;
	border-top: 1rpx solid #f0f0f0;
	padding-bottom: calc(20rpx + env(safe-area-inset-bottom));

	.toolbar-switch-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		margin-bottom: 24rpx; // 与图标行的间距
		.toolbar-label {
			font-size: 28rpx;
		}
	}

	.toolbar-icon-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		.toolbar-icon-row-left,.toolbar-icon-row-right{
			display: flex;
			align-items: center;
		}
		.icon-canyuhuati-biaoqing{
			font-size: 44rpx!important;
		}
		.indexIconFont{
			font-size: 40rpx;
			color: #2C2C2C;
			margin-right: 30rpx;
		}
		.icon{
			margin-right: 30rpx;
		}
		.icon-nm{
			margin-right: 10rpx;
		}
	}
}
</style>